<template>
  <h3>{{ state.title }}</h3>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    size="small"
    :pagination="false"
  />
</template>
<script setup>
import { reactive } from "vue";
import CommonDefine from "@/component/CommonDefine";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const props = defineProps({ modelId: Number });
const dataSource = reactive([]);
const columns = [
  { title: t("317"), dataIndex: "displayOrder" },
  { title: t("315"), dataIndex: "label" },
  { title: t("316"), dataIndex: "fieldTypeLabel" },
  { title: t("130"), dataIndex: "tag" },
];
const appStore = CommonDefine.appStore();
const state = reactive({
  title: "",
});

const loadField = () => {
  let fn = (fields) => {
    CommonDefine.clearArray(dataSource);
    fields.forEach((fd) => {
      fd.key = fd.id;
      fd.fieldTypeLabel = appStore.aryFieldType.find(
        (x) => x.key == fd.fieldType.T
      ).label;
      if (tagMap && tagMap[`${fd.id}`]) {
        fd.tag = tagMap[`${fd.id}`];
      }
      dataSource.push(fd);
    });
  };
  let tagMap = {};
  fetch(`/api/v1/share/tags/${props.modelId}`, {
    headers: {
      Authorization: `Bearer ${localStorage.getItem("token")}`,
    },
  })
    .then((res) => res.json())
    .then((arm) => {
      if (arm.ok) {
        tagMap = arm.data;
        if (tagMap[props.modelId]) {
          state.title = t("350", [tagMap[props.modelId]]);
        } else {
          state.title = t("349");
        }
      }
      CommonDefine.runWithFieldCache(props.modelId, fn);
    })
    .catch((e) => {
      CommonDefine.axiosErrorHandler(e);
    });
};

defineExpose({ loadField });
</script>
